LT: Mijinkoのデザイン変更にあたっての経緯（の一部）
作成途中でも書き込みおｋですが、後で移動させるかもしれませんMijikko.icon
ご了承下さい
今回の発表のテーマ
何故このようなデザインにしたのか、等
まずはクイズ
https://gyazo.com/79d4bbc4c02f2600144f060361df4696 https://gyazo.com/7574aa2451106800aab9df34c1eaa94d
その中で、特にMijikko.iconがこだわった部分をお答えください
※事前アンケート制です
※選択肢にアイコンを付けてください
※過去に書いたページに答えが載っているかもしれませんが、見なかったことにしてください
1. タイトル行kyamad9.icon
2. ナビゲーションバー（.navbar）kutsumofu.iconsuto3.icon ちなみに、LT用に省略した場合は、このクイズの正解に関することのみ話しますMijikko.icon
省略しなかった場合は、デザイン変更の経緯全体を話します
省略しました
以下なっがい空行
発表終わったので削除
下を見る前に、アンケートへの回答をお願いしますMijikko.icon
ネタバレになっちゃうので
https://gyazo.com/1885d49ebf889beadd8f30ecc33907e3
タイトル行と本文の違いがあまり無い
本文に目立つ要素（青リンク・画像・コードブロック etc.）があると、ページを開いた直後にまずそちらに目線が移ってしまう可能性がある おそらくMijikko.icon
大抵の場合、タイトルには本文の方向性が示されているので、一番最初に読んでもらう必要がある
というより、Mijikko.iconが作成したページはタイトルを最初に読んでもらわないと困るような作りになっていることが多い
紙copiのUIはこんな感じだったsuto3.icon 本文の一行目がタイトル（ファイル名）であるという思想だった
関連ページリストが下にあって、アクセスしにくい
下に隠すことで見た目をシンプルにするという効果もあるので、あくまでMijikko.iconの好みに沿っていないというだけでもある
タイトル行と本文が大きさしか違わない
最初ページを開いた直後、ページ本文の方に視線が向いてしまうかもしれない
ページタイトルを飛ばしてページ本文から読み進めてしまったのなら、ページの趣旨がわからなくなるかもしれない
Mijikko.iconの個人projectでは、ページタイトルのページ本文の要約を書くことがほとんどなので、最初にページタイトルを読んでもらわないとページを読みにくくなる これとは真逆に、タイトル行と本文を同じスタイルにしているprojectもあるtakker.icon
それを踏まえて今回一番意識したのは
ぱっと見で構成要素が目に入るデザインを目指す
ということです
構成要素が目に入るとはどういうことか
https://gyazo.com/170ecbc7f52e0234b38b360a08d2a672
上の丸の中で一番目立つのはどれでしょう？
https://gyazo.com/786d52306f3762adb7d0d284605f874b
上の丸の中で一番目立つのは？
https://gyazo.com/12ec423696c763a3e51c5f179e148f06
上の丸の中では？
これはちょっとわかりにくいかもMijikko.icon
そして、目立つ要素は目を惹かれやすい
この特徴をうまく使えば、視線誘導をすることだってできるかも ※正確には、周りと違ってかつ強い要素
でかい・色が強い・等
今回の発表からは逸れるので、ここを深掘りはしない
タイトル行を本文より目立たせるために行ったこと
https://gyazo.com/0f1669584f339fe5feb1a63a5f874ccc
タイトル行を―――
ページ本文より左に飛び出させる
naruhodo kyamad9.icontakker.icon
フォントを変える
本文のフォントはそのまま
下線をつける
おんなじような理由で/work4aiでは中央揃えにしてますねnomadoor.icon これにより、以前よりもタイトル行が、ページ本文より視覚的に違う要素として見えるようになった
はっきり分かれたから、ページの構成要素を把握する時にも疲れにくいと思います
（ごはんたべたい…）
余談：クイズの解説
1. タイトル行
これは今回のCSS作成において、一番「新しい変更」が多いので、こだわりポイントが高い
ページタイトルを常時表示するためのエリアを確保しておきたいので2段にしたというのはあるけれど、そこまでこだわりはない
情報の鮮度を大事にしているので出しておきたいwho.icon
ページの作成日時や更新日時が大事なので常時表示したMijikko.icon
軽いノウハウとかを書くことが多いが、古くなると間違ったやり方になることがあるので
目立つけれど、前回も同様のCSSを作成したので、新規のこだわりは無い感じ
見やすくなるような工夫は多少やった
2カラムレイアウトに抑えるために、右側に持ってきた
他のサイトを見ても、ページ本文が左側にあるパターンが多かったという理由もある
タイトルをわかりやすく簡潔にしたいという目標があるんだなって思いましたcFQ2f7LRuLYP.icon
デザインって感じですごいなぁと思いましたkutsumofu.icontakker.icon